<template>
	<view class="container">
		<view v-if="detailObj&&detailObj.id">
			<view class="flex-wrp margin-b-xs">
				<view>{{detailObj.title}}</view>
			</view>
			<view class="margin-b-xs" style="font-size: 26rpx;opacity: 0.6;">{{reportId?'推送时间':'发布时间'}}：{{reportId?detailObj.pushTime:detailObj.updateTime}}</view>
			<view class="detailBox" v-html="detailObj.content"></view>
			<view class="imageBox">
				<image v-for="(item,value) in detailObj.imgList" :key="value" mode="aspectFill" :src="item" @click="previewImage(item)"></image>
			</view>
		</view>
		<view class="sureBox" v-if="!detailObj.isBuy && !isMyself">
			<view class="price">￥ {{detailObj.amount?detailObj.amount:'0'}}</view>
			<view class="sureBtn" @click="sureFn">立即订阅</view>
		</view>
		<view class="sureBox" v-if="detailObj.isBuy || isMyself">
			<!-- <view class="price">已购买</view> -->
			<view class="sureBtn" @click="seeFn">立即查看</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				reportId:'',
				detailObj:{},
				userInfo:{},
				isMyself:false,
			}
		},
		onLoad(e) {
			this.userInfo = uni.getStorageSync('userInfo')
			this.id = e.id
			if(e.isMyself){
				this.isMyself = e.isMyself
			}
			if(e.reportId){
				this.reportId = e.reportId
			}
		},
		onShow() {
			this.getDetailFn()
		},
		methods: {
			getDetailFn(){
				if(this.reportId){
					// /api/report/queryById
					// 订阅
					this.$http('/api/report/queryReportFileById',{id:this.id}).then(res=>{
						// res.result.reportFileList.forEach(item=>{
							// if(item.id == this.id){
								this.detailObj = res.result
								this.detailObj.imgList=this.detailObj.imgUrl?this.detailObj.imgUrl.split(','):'';
							// }
						// })
					})
				}else {
					// 一次性
					this.$http('/api/report/queryById',{id:this.id}).then(res=>{
						this.detailObj = res.result
						this.detailObj.imgList=this.detailObj.imgUrl?this.detailObj.imgUrl.split(','):'';
					})
				}
			},
			previewImage(url) {
				uni.previewImage({
					urls: this.detailObj.imgList,
					current: url
				});
			},
			sureFn(){
				if(this.$isLogin())return
				if(this.detailObj.amount){
					uni.showToast({
						title:'暂不支持在线支付',
						icon:'none'
					})
				}else {
					this.$http('/api/order/createOrder',{reportId:this.reportId?this.reportId:this.id,totalFee:0},'POST').then(res=>{
						uni.navigateTo({
							url:'/pages/space/list'
						}).then(res1=>{
							uni.showToast({
								title:'订阅成功',
								icon:'none'
							})
						})
					})
				}
			},
			seeFn(){
				let that=this;
				uni.downloadFile({
					url: this.detailObj.fileUrl,
					success: function (res) {
						var filePath = res.tempFilePath;
						that.addDownloadNum();
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function (res) {
								console.log('打开文档成功');
							}
						});
					}
				});
			},
			// 报告管理-添加下载量
			addDownloadNum(){
				this.$http('/api/report/addDownloadNum',{
					id:this.id,
					type:this.detailObj.type==0?1:2,//类型 1一次性报告 2订阅报告文件
				}).then(res=>{
					
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 750rpx;
		min-height: 100vh;
		background:#fff;
		 // #F0F1F6;
		padding: 30rpx 30rpx 180rpx 30rpx;
		.detailBox {
			 font-size: 26rpx;
			 margin: 20rpx 0;
			 opacity: 0.9;
			 white-space:pre-wrap;
		}
		.imageBox {
			display: flex;
			flex-wrap: wrap;
			image {
				width: 216rpx;
				height: 216rpx;
				margin: 0 16rpx 16rpx 0;
				position: relative;
				&:nth-child(3n){
					margin: 0 0;
				}
			}
		}
		.imageBox1 {
			width: 100%;
			height: 100%;
			image {
				width: 100%;
				height: 0;
			}
		}
	}
	.margin-b-xs{
		margin-bottom: 20rpx;
	}
	.margin-r-xs {
		margin-right: 20rpx;
	}
	.sureBox {
		width: 750rpx;
		height: 146rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 40rpx;
		z-index: 999;
		box-shadow: 0rpx -2rpx 0rpx 0rpx rgba(0,0,0,0.06);
		.sureBtn {
			width: 272rpx;
			height: 96rpx;
			background: #2563EB;
			border-radius: 506rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36rpx;
			color: #FFFFFF;
			position: absolute;
			top: 20rpx;
			right: 32rpx;
		}
		.price {
			color: #F5222D;
			font-size: 46rpx;
			position: absolute;
			top: 32rpx;
			left: 32rpx;
		}
	}
</style>
